<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/7/9
  Time: 下午10:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>接口详情</title>
    <script src="/starCms/js/jsonFormat/jsonFormater.js"></script>
    <link rel="stylesheet" href="/starCms/css/jsonFormat/jsonFormater.css"></link>
    <style type="text/css">

        th {
            background-color: #f5f5f5;
            min-width: 90px;
            font-size: 14px;
        }
        .p_need {
            color: red;
            font-weight: bold;
        }
        .form-group label {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">接口详情</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">接口环境：</label>
                <div class="col-sm-10">

                    <select id="interfaceEvn" class="form-control">
                        <option>请选择</option>
                        <c:forEach items="${serverList}" var="list" varStatus="status">
                            <option value="http://${list.ip}:${list.port}/starCms/${info.context_path}">${list.env}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="address" class="col-sm-2 control-label">接口地址：</label>
                <div class="col-sm-10">
                    <%--//默认的--%>
                    <input type="text" class="form-control" value="" id="address" placeholder="接口地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">调用方式：</label>
                <div class="col-sm-10">
                    <button type="button" class="btn btn-default">${info.type}</button>
                </div>
            </div>


            <div class="form-group">
                <label for="address" class="col-sm-2 control-label">参数列表：</label>
                <div class="col-sm-10">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>参数名</th>
                                <th>类型</th>
                                <th>是否必须</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${info.paramList}" var="parameter">
                                <tr>
                                    <td>${parameter.param_name}</td>
                                    <td>${parameter.param_type}</td>
                                    <td>${parameter.is_need}</td>
                                    <td>${parameter.description}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">测试：</label>
                <div class="col-sm-10">
                    <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#interfaceTest" aria-expanded="false" aria-controls="interfaceTest">
                        点击进行接口测试
                    </button>
                    <div class="collapse" style="margin-top: 10px" id="interfaceTest">
                        <div class="well">
                            <c:forEach items="${info.paramList}" var="nparameter">
                                <div class="form-group">
                                    <label for="address" class="col-sm-3 control-label">${nparameter.param_name_zh}：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="${nparameter.param_name}" placeholder="${nparameter.param_name_zh}">
                                    </div>
                                </div>
                            </c:forEach>
                            <div class="form-group">
                                <label for="address" class="col-sm-3 control-label"></label>
                                <div class="col-sm-9">
                                    <button type="button" id="submitRequest" class="btn btn-primary">提交请求</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">返回值：</label>
                <div class="col-sm-10">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="returnJson"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">返回值说明：</label>
                <div class="col-sm-10">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>字段名</th>
                                <th>类型</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="background-color: #535a5a;color: white;">
                                <td>status</td>
                                <td>字符串</td>
                                <td>业务状态码</td>
                            </tr>
                            <tr style="background-color: #535a5a;color: white;">
                                <td>message</td>
                                <td>字符串</td>
                                <td>提示消息</td>
                            </tr>
                            <tr style="background-color: #535a5a;color: white;">
                                <td>data</td>
                                <td>JSON对象</td>
                                <td>业务数据</td>
                            </tr>
                            <c:forEach items="${info.returnParamList}" var="returnParam">
                                <tr>
                                    <td>${returnParam.param_name}</td>
                                    <td>${returnParam.param_type}</td>
                                    <td>${returnParam.description}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
    <script>
        //格式化JSON
        var options = {
            dom : '#returnJson' //对应容器的css选择器
        };
        var jsonFormat = new JsonFormater(options); //创建对象
        var retJson = '${info.ret_json}';
        $("#returnJson").text(jsonFormat.doFormat(retJson));
    </script>

    <script>
        var uri = '${info.url}';
        $(function () {

            $("#interfaceEvn").on("change",function () {
                $("#address").val($(this).val() + uri);
            });

            //请求接口
            $("#submitRequest").on("click",function () {

                var data = {};
                $("#interfaceTest input").each(function (index,value) {
                    data[$(value).attr("id")] = $(value).val();
                });

                var interfaceUrl = $("#address").val();
                $.emsAjax({
                    url:interfaceUrl,
                    data:data,
                    type:"POST",
                    success:function (resp) {
                        if (!resp) {
                            $.toast("请求失败","cancel");
                            $("#jsonResult").text("NULL");
                        }else {
                            $.toast("请求成功");
                            $("#jsonResult").text(jsonFormat.doFormat(JSON.stringify(resp)));
                        }
                    }
                });
            });
        })
    </script>
</body>
</html>
